<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员充值</title>
    <link rel="stylesheet" href="/app/ky_shouyin/component/layui/css/layui.css">
    <script src="/app/ky_shouyin/component/layui/layui.js"></script>
    <style>
        .main-content {
            position: absolute;
            left: 80px;
            right: 0;
            top: 60px;
            bottom: 0;
            padding: 15px;
            overflow: auto;
            display: flex;
            gap: 15px;
        }
        .recharge-box {
            flex: 0 0 500px;
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .record-box {
            flex: 1;
            background: #fff;
            padding: 20px;
            border-radius: 4px;
        }
        .member-info {
            margin: 15px 0;
            padding: 15px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .member-info .info-item {
            margin-bottom: 10px;
            line-height: 24px;
        }
        .member-info .info-label {
            display: inline-block;
            width: 80px;
            color: #666;
        }
    </style>
</head>
<body>
<?php include base_path() . '/plugin/ky_shouyin/app/view/layout/topmenu.html'; ?>
<?php include base_path() . '/plugin/ky_shouyin/app/view/layout/front_leftmenu.html'; ?>

<div class="main-content">
    <div class="recharge-box">
        <form class="layui-form" lay-filter="rechargeForm" autocomplete="off">
            <div class="layui-form-item">
                <label class="layui-form-label">查询方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="search_type" value="phone" title="手机号" checked>
                    <input type="radio" name="search_type" value="card" title="会员卡号">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">会员查询</label>
                <div class="layui-input-block">
                    <input type="text" name="search_key" autocomplete="off" class="layui-input search-input"
                           placeholder="请输入手机号">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="searchBtn">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

            <div class="member-info" style="display: none;">
                <div class="info-item">
                    <span class="info-label">会员姓名：</span>
                    <span class="member-name"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">手机号：</span>
                    <span class="member-phone"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">卡号：</span>
                    <span class="member-card"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">当前余额：</span>
                    <span class="member-balance"></span>
                </div>
            </div>

            <div class="recharge-form" style="display: none;">
                <div class="layui-form-item">
                    <label class="layui-form-label">充值金额</label>
                    <div class="layui-input-block">
                        <input type="number" name="amount" required lay-verify="required|number" 
                               placeholder="请输入充值金额" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">支付方式</label>
                    <div class="layui-input-block">

                        <input type="radio" name="pay_type" value="1" title="现金支付" checked>
                        <input type="radio" name="pay_type" value="2" title="微信">
                        <input type="radio" name="pay_type" value="3" title="支付宝">
                        <input type="radio" name="pay_type" value="4" title="银行卡">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submitRecharge">立即充值</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="record-box">
        <table id="rechargeTable" lay-filter="rechargeTable"></table>
    </div>
</div>

<script>
layui.use(['form', 'table', 'layer'], function(){
    var form = layui.form;
    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;
    
    // 监听查询方式切换
    form.on('radio(search_type)', function(data){
        var $input = $('.search-input');
        if(data.value === 'phone') {
            $input.val('').attr('placeholder', '请输入手机号');
        } else {
            $input.val('VIP').attr('placeholder', '请输入会员卡号');
        }
    });
    
    // 会员卡号输入处理
    $('.search-input').on('input', function(){
        var searchType = $('input[name="search_type"]:checked').val();
        if(searchType === 'card') {
            var value = $(this).val().toUpperCase();
            if(!value.startsWith('VIP')) {
                value = 'VIP' + value.replace(/VIP/g, '');
            }
            $(this).val(value);
        }
    });
    
    // 初始化表格
    table.render({
        elem: '#rechargeTable'
        ,url: '/app/ky_shouyin/front/member/rechargeList'
        ,cols: [[
            {field: 'created_at', title: '充值时间', width: 160}
            ,{field: 'member_name', title: '会员姓名', width: 100}
            ,{field: 'amount', title: '充值金额', width: 100}
            ,{field: 'payment_method', title: '支付方式', width: 100, templet: function(d){
                    var methods = {1:'现金', 2:'微信', 3:'支付宝',4:'银行卡'};
                    return methods[d.payment_method] || '';
                }}
            ,{field: 'staff_name', title: '操作员', width: 100}
        ]]
        ,page: true
        ,limit: 20
        ,limits: [20,30,50,100]
        ,skin: 'line'
    });
    
    // 会员查询按钮点击事件
    $('#searchBtn').click(function(){
        var searchType = $('input[name="search_type"]:checked').val();
        var searchKey = $('input[name="search_key"]').val();
        
        if(!searchKey) {
            layer.msg('请输入' + (searchType === 'phone' ? '手机号' : '会员卡号'));
            return false;
        }
        
        if(searchType === 'card' && !searchKey.startsWith('VIP')) {
            layer.msg('会员卡号必须以VIP开头');
            return false;
        }
        
        var loading = layer.load(1);
        $.get('/app/ky_shouyin/front/member/getMember', {
            search_key: searchKey,
            search_type: searchType
        }, function(res){
            layer.close(loading);
            if(res.code === 0 && res.data){
                $('.member-info').show();
                $('.recharge-form').show();
                $('.member-name').text(res.data.name);
                $('.member-phone').text(res.data.phone);
                $('.member-card').text(res.data.card_no);
                $('.member-balance').text('￥' + res.data.balance);
                $('form').attr('data-member-id', res.data.id);
                
                // 重载充值记录表格
                table.reload('rechargeTable', {
                    where: {
                        member_id: res.data.id
                    },
                    page: {
                        curr: 1
                    }
                });
            } else {
                layer.msg(res.msg || '未找到会员信息');
                $('.member-info').hide();
                $('.recharge-form').hide();
                // 清空充值记录表格
                table.reload('rechargeTable', {
                    where: {
                        member_id: ''
                    },
                    page: {
                        curr: 1
                    }
                });
            }
        });
    });
    
    // 提交充值
    form.on('submit(submitRecharge)', function(data){
        var memberId = $('form').attr('data-member-id');
        if(!memberId){
            layer.msg('请先查询会员信息');
            return false;
        }
        
        layer.confirm('确认充值金额：￥' + data.field.amount + '？', function(index){
            layer.close(index);
            var loading = layer.load(1);
            $.post('/app/ky_shouyin/front/member/doRecharge', {
                member_id: memberId,
                amount: data.field.amount,
                pay_type: data.field.pay_type
            }, function(res){
                layer.close(loading);
                if(res.code === 0){
                    layer.msg('充值成功');
                    // 刷新表格和会员信息
                    table.reload('rechargeTable');
                    $('button[lay-filter="searchBtn"]').click();
                } else {
                    layer.msg(res.msg || '充值失败');
                }
            });
        });
        return false;
    });
});
</script>
</body>
</html> 